/**
在 React 中，父组件与子组件之间的通信主要是通过 props（属性）来实现的。
  1. 父组件传递数据给子组件
  - 定义状态：在父组件中定义需要传递给子组件的状态。
  - 通过 props 传递：将父组件的状态或方法作为 props 传递给子组件。
  jsx
  // 父组件
  class Parent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        message: 'Hello from Parent!',
      };
    }

    render() {
      return <Child message={this.state.message} />;
    }
  }

  // 子组件
  const Child = (props) => {
    return <div>{props.message}</div>;
  };
  2. 父组件传递方法给子组件
  - 定义方法：在父组件中定义一个方法。
  - 通过 props 传递方法：将该方法作为 props 传递给子组件，子组件可以在需要的时候调用这个方法。
  jsx
  // 父组件
  class Parent extends React.Component {
    handleChildClick = () => {
      alert('Child clicked!');
    };

    render() {
      return <Child onClick={this.handleChildClick} />;
    }
  }

  // 子组件
  const Child = (props) => {
    return <button onClick={props.onClick}>Click Me</button>;
  };
  3. 注意事项
  - 单向数据流：在 React 中，数据是单向流动的，即从父组件流向子组件。子组件不能直接修改父组件的状态。
  - 状态提升：如果多个子组件需要共享同一状态，可以将状态提升到它们的共同父组件中。
  - 组件复用：通过 props，可以使子组件更加灵活和可复用。

  4. 总结
  父组件通过 props 向子组件传递数据和方法，是 React 组件之间通信的主要方式。这样的设计使得组件之间的关系更加清晰，维护起来也更加方便。
 */
import React, { Component } from 'react'
import Header from './c-cpns/Header'
import Main from './c-cpns/Main'
import Footer from './c-cpns/Footer'

import './style.css'

export class App extends Component {
  render() {
    return (
      <div className='app'>
        <Header/>
        <Main/>
        <Footer/>
      </div>
    )
  }
}

export default App